<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常见的基本的语法规则</title>
		<style type="text/css">
			#d1{
				/* 背景颜色 */
				background-color: aquamarine;
				width: 200px;
				height: 150px;
				/* 边框*/
				border: 1px solid red;
				/* 让div容器左浮动，右边可以放其他的元素 */
				float: left;
				/* 如果div和div2需要左浮动 */
			}
			.c1{
				width: 200px;
				height: 100px;
				background-color: red;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="./test1.css"/>
	</head>
	<body>
		
		<div id="d1" class="c1">
			<div>
				div1
				<p>我是p标签1</p> 
			</div>
			
			<div id="d2" class="c2">
				div2
				<p>我是p标签</p>
				<p><img src="../img/ad-02.jpg" ></p>
				<!-- 列表 -->
				<ul class="ul1">
					<li><a href="#">购物车</a></li>
					<li><a href="#">注册</a></li>
					<li><a href="#">登录</a></li>
					<li><a href="#">退出</a></li>
				</ul>
				
			</div>
			
		</div>
		
		
	</body>
</html>
